<div class="el-transfer">
  <!-- 左侧面板 -->
  <div class="el-transfer-panel">
    <p class="el-transfer-panel__header">
      <label class="el-checkbox" ng-class="{ 'is-checked': allChecked.left }">
        <span class="el-checkbox__input"
          ng-class="{ 'is-indeterminate': checkedCount.left !== 0 && checkedCount.left !== leftData.length, 'is-checked': allChecked.left }">
          <span class="el-checkbox__inner"></span>
          <input type="checkbox" ng-model="allChecked.left" aria-hidden="false" class="el-checkbox__original"
            ng-click="toggleAll('left')" />
        </span>
        <span class="el-checkbox__label">
          {{titles.length > 1 ? titles[0] : '列表1'}}
          <span>{{ checkedCount.left }} / {{ leftData.length }}</span>
        </span>
      </label>
    </p>

    <div class="el-transfer-panel__body">
      <div class="el-transfer-panel__filter el-input el-input--small el-input--prefix">
        <input type="text" autocomplete="off" placeholder="请输入城市拼音" class="el-input__inner" ng-model="searchQuery.left">
        <span class="el-input__prefix"><i class="el-input__icon el-icon-search"></i>
        </span>
      </div>
      <div class="el-checkbox-group el-transfer-panel__list is-filterable">
        <label class="el-checkbox el-transfer-panel__item"
          ng-class="{ 'is-disabled': item.disabled, 'is-checked': item.checked  }"
          ng-repeat="item in leftData | filter:searchQuery.left track by item.key">
          <span class="el-checkbox__input" ng-class="{ 'is-disabled': item.disabled, 'is-checked': item.checked }">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" ng-model="item.checked" ng-disabled="item.disabled"
              class="el-checkbox__original" ng-click="computedChecked('left')">
          </span>
          <span class="el-checkbox__label">
            <span>{{ item.label }}</span>
          </span>
        </label>
      </div>
    </div>
  </div>

  <!-- 操作按钮 -->
  <div class="el-transfer__buttons">
    <button type="primary" class="el-button el-button--primary el-transfer__button" circle
      ng-class="{ 'is-disabled': !checkedCount.right }" ng-click="transferItems('left')">
      <span><i class="el-icon-arrow-left"></i></span>
    </button>
    <button type="primary" class="el-button el-button--primary el-transfer__button" circle
      ng-class="{ 'is-disabled': !checkedCount.left }" ng-click="transferItems('right')">
      <span><i class="el-icon-arrow-right"></i></span>
    </button>
  </div>

  <!-- 右侧面板（结构与左侧对称） -->
  <div class="el-transfer-panel">
    <!-- 结构同左侧，变量替换为 right* -->
    <p class="el-transfer-panel__header">
      <label class="el-checkbox" ng-class="{ 'is-checked': allChecked.right }">
        <span class="el-checkbox__input"
          ng-class="{ 'is-indeterminate': checkedCount.right !== 0 && checkedCount.right !== rightData.length, 'is-checked': allChecked.right }">
          <span class="el-checkbox__inner"></span>
          <input type="checkbox" ng-model="allChecked.right" aria-hidden="false"
            class="el-checkbox__original" ng-click="toggleAll('right')" />
        </span>
        <span class="el-checkbox__label">
          {{titles.length === 2 ? titles[1] : '列表2'}}
          <span>{{ checkedCount.right }} / {{ rightData.length }}
          </span>
        </span>
      </label>
    </p>

    <div class="el-transfer-panel__body">
      <div class="el-transfer-panel__filter el-input el-input--small el-input--prefix">
        <input type="text" autocomplete="off" placeholder="请输入城市拼音" class="el-input__inner" ng-model="searchQuery.right">
        <span class="el-input__prefix"><i class="el-input__icon el-icon-search"></i>
        </span>
      </div>
      <div class="el-checkbox-group el-transfer-panel__list is-filterable">
        <label class="el-checkbox el-transfer-panel__item"
          ng-class="{ 'is-disabled': item.disabled, 'is-checked': item.checked  }"
          ng-repeat="item in rightData | filter:searchQuery.right track by item.key">
          <span class="el-checkbox__input" ng-class="{ 'is-disabled': item.disabled, 'is-checked': item.checked }">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" ng-model="item.checked" ng-disabled="item.disabled"
              class="el-checkbox__original" ng-click="computedChecked('right')">
          </span>
          <span class="el-checkbox__label">
            <span>{{ item.label }}</span>
          </span>
        </label>
      </div>
    </div>
  </div>
</div>